<template>
  <view>
    <!-- 选项开始 -->
    <view class="jiFen">
      <!-- 表情包 -->
      <view class="jiFen-mingxi" :class="active==='1'?'active':''" @click="a('1')">
        表情包
      </view>
      <!-- 头像 -->
      <view class="jiFen-mingxi" :class="active==='2'?'active':''" @click="a('2')">
        头像
      </view>
    </view>
    <!-- 选项结束 -->

    <!-- 没有更多数据 -->
    <myBox></myBox>
  </view>
</template>

<script>
  import myBox from "../../components/my-box/my-box.vue"
  export default {
    components: {
      myBox
    },
    data() {
      return {
        active: '1',
      };
    },
    onLoad(option) {
      console.log(option.type)
      console.log(typeof option.type)
      // this.active = option.type
      // let title = "我的关注"
      // if (option.type == '2') {
      //   title = '我的粉丝'
      // }
      // // 页面加载更改头部标题
      // uni.setNavigationBarTitle({
      //   title
      // })

    },
    methods: {
      a(i) {
        this.active = i;
      }
    }
  }
</script>

<style lang="scss">
  // 选项开始
  .jiFen {
    display: flex;
    height: 100rpx;
    background-color: #fff;
    align-items: center;
    text-align: center;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 1, 0.2);
    margin-bottom: 20rpx;

    .jiFen-mingxi {
      flex: 1;
    }

    .jiFen-jilu {
      flex: 1;
    }
  }

  .active {
    color: #f23a3a;
    position: relative;
    font-weight: 700;

    &::before {
      content: ' ';
      display: block;
      width: 120rpx;
      height: 4rpx;
      background-color: #c00000;
      position: absolute;
      bottom: -30rpx;
      left: 50%;
      transform: translateX(-50%);
    }
  }
</style>
